<template>
    <div class="keycode">
        <!-- 查询列表 -->
        <el-row class="keycode-list">
            <el-col :span="24">
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                    label="账号Id"
                    width="100"
                    prop="id">
                    </el-table-column>
                    <el-table-column
                    prop="username"
                    label="登录名"
                    width="220">
                    </el-table-column>
                    <el-table-column
                    prop="phone"
                    label="电话"
                    width="220">
                    </el-table-column>
                    <el-table-column
                    prop="email"
                    label="邮箱"
                    width="180">
                    </el-table-column>
                    <el-table-column
                    prop="address"
                    label="操作">
                        <!-- <template slot-scope="scope">
                            <el-button type="text" @click="banner(scope.row.id)">封禁</el-button>
                            <el-button type="text" @click="delete(scope.row.id)">删除</el-button>
                        </template> -->
                        <template slot-scope="scope">
                        <el-popconfirm 
                        confirm-button-text='确认' 
                        cancel-button-text='取消' 
                        icon="el-icon-info" 
                        icon-color="red" 
                        title="确定禁用吗？"
                        @confirm="banner(scope.row.id)"
                        >
                          <!-- <el-button type="text" slot="reference">禁用</el-button> -->
                          <el-button type="info" size="mini" slot="reference">封禁</el-button>
                        </el-popconfirm>
                        &nbsp;
                        <!-- <el-button type="text" @click="banner(scope.row.id)">禁用</el-button> -->
                        <el-popconfirm 
                        confirm-button-text='确认' 
                        cancel-button-text='取消' 
                        icon="el-icon-info" 
                        icon-color="red" 
                        title="确定删除吗？"
                        @confirm="deleteStudentAccount(scope.row.id)"
                        >
                          <!-- <el-button type="text" slot="reference">删除</el-button> -->
                          <el-button type="danger" size="mini" slot="reference">删除</el-button>
                        </el-popconfirm>
                        &nbsp;
                        <el-popconfirm 
                        confirm-button-text='确认' 
                        cancel-button-text='取消' 
                        icon="el-icon-info" 
                        icon-color="red" 
                        title="确定注销吗？"
                        @confirm="cancelAccount(scope.row.id)"
                        >
                          <!-- <el-button type="text" slot="reference">删除</el-button> -->
                          <el-button type="warning" size="mini" slot="reference">注销</el-button>
                        </el-popconfirm>
                        <!-- <el-button type="text" @click="delete(scope.row.id)">删除</el-button> -->
                      </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <div class="block">
              <el-pagination
                  layout="prev, pager, next"
                  :total="pageHelp.total * 10"
                  @current-change="changeCurrentPage"
                  >
              </el-pagination>
          </div>
    </div>
</template>

<script>
let path = "http://localhost";
import axios from 'axios'
export default {
    data(){
        return {
            tableData:[],
            pageHelp:{
                currentPage : 1,
                perPageSize : 10,
                total:1,
            },
        }
    },
    methods:{

        warningMessage(info) {
            this.$message({
                message: info,
                type: 'warning'//success、warning
            });
        },
        successMessage(info) {
            this.$message({
                message: info,
                type: 'success'//success、warning
            });
        },
        errorMessage(info) {
            this.$message.error(info);
        },

        //分页查询
        changeCurrentPage(currentPage) {
            console.log(this.pageHelp.currentPage);
            this.pageHelp.currentPage = currentPage;
            axios({
                method: 'get',
                url:path+"/backstage/student/account",
                params: {
                    currentPage: this.pageHelp.currentPage,
                    perPageSize: this.pageHelp.perPageSize,
                },
                headers: {
                    id: JSON.parse(localStorage.getItem("account")).id,
                    token: JSON.parse(localStorage.getItem("account")).token,
                },

            }).then(res => {
                if (res.data.code === 500) {
                    this.warningMessage("您的权限不足！")
                } else if (res.data.code === 40100) {
                    console.log(res.data.data);
                    this.tableData = res.data.data.list;
                    this.pageHelp.total = res.data.data.pages;
                } else {
                    this.errorMessage("查询失败！");
                }

                console.log(res);
            }).catch(error => {
                console.log(error);
            })
        },
        
        //展示所有已启用的学生账号
        list(){
            axios({
                method:'GET',
                url:path+"/backstage/student/account",
                params: {
                    currentPage: this.pageHelp.currentPage,
                    perPageSize: this.pageHelp.perPageSize,
                },
                headers:{
                    id: JSON.parse(localStorage.getItem("account")).id,
                    token: JSON.parse(localStorage.getItem("account")).token,
                }
            }).then(res => {
                if(res.data.code === 500){
                    this.warningMessage("您的权限不足！")
                }else if(res.data.code === 40100){
                    this.tableData = res.data.data.list;
                    this.pageHelp.total = res.data.data.pages;
                }else{
                    this.errorMessage("查询失败！");
                }
            }).catch(error => {
                console.log(error);
            })
        },

        //封禁某个账号
        banner(id){
            console.log(id);
            axios({
                method:'PUT',
                url:path + "/backstage/student/bAccount/" + id,
                headers:{
                    id: JSON.parse(localStorage.getItem("account")).id,
                    token: JSON.parse(localStorage.getItem("account")).token,
                }
            }).then(res => {
                if(res.data.code === 500){
                    alert("您的权限不足")
                }else if(res.data.code === 30100){
                    console.log(res);
                    this.list()
                }else{
                    alert('更新失败')
                }
                
                // this.tableData = res.data.data;
            }).catch(error => {
                console.log(error);
            })
        },

        //删除某个账号
        deleteStudentAccount(id){
            console.log(id);
            axios({
                method:'DELETE',
                url:path + "/backstage/student/account/" + id,
                headers:{
                    id: JSON.parse(localStorage.getItem("account")).id,
                    token: JSON.parse(localStorage.getItem("account")).token,
                }
            }).then(res => {
                if(res.data.code === 500){
                    alert("您没有权限")
                }else if(res.data.code === 20100){
                    console.log(res);
                this.list()
                }else{
                    alert("删除失败")
                }
            }).catch(error => {
                console.log(error);
            })
        },
        cancelAccount(id){
            axios({
                method:'PUT',
                url:path+"/backstage/student/cancelAccount/"+id,
                headers:{
                    id: JSON.parse(localStorage.getItem("account")).id,
                    token: JSON.parse(localStorage.getItem("account")).token,
                }
            }).then(res => {
                if(res.data.code === 500){
                    alert("您没有权限")
                }else if(res.data.code === 30100){
                    this.list()
                }else{
                    alert("注销失败失败")
                }
            }).catch(error => {
                console.log(error);
            })
        }
    },
    created(){
        this.list()
    }
}
</script>

<style scoped>
.keycode{
    width: 100%;
    min-height: 100%;
    padding: 15px;
    box-sizing: border-box;
}
.keycode-list{
    width: 100%;
    margin-bottom: 20px;
}
</style>